import React, {Component} from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
import Cookies from 'js-cookie' // 可以操作前端cookie的对象
import {NavBar} from 'antd-mobile'

import BossInfo from '../boss-info/boss-info'
import MengXinInfo from '../mengxin-info/mengxin-info'
import Boss from '../boss/boss'
import Mengxin from '../mengxin/mengxin'
import Message from '../message/message'
import Personal from '../pensonal/personal'
import NotFound from '../../components/not-found/not-found'
import {getRedirecTo} from "../../utils";
import {getUser} from '../../redux/actions'
import NavFooter from '../../components/nav-footer/nav-footer'
import Chat from '../chat/chat'

class Main extends Component {

  navList = [
    {
      path:'/boss',
      component:Boss,
      title:'萌新列表',
      icon:'home',
      text:'萌新'
    },
    {
      path:'/mengxin',
      component:Mengxin,
      title:'Boss列表',
      icon:'home',
      text:'Boss'
    },
    {
      path:'/message',
      component:Message,
      title:'消息列表',
      icon:'message',
      text:'消息'
    },
    {
      path:'/personal',
      component:Personal,
      title:'个人中心',
      icon:'personal',
      text:'个人'
    }
  ];

  componentDidMount() {
    // 登录过(cookie中有userid,但没有登录，（redux管理的user中没_id）) 发送请求获取对应的user
    const userid = Cookies.get('userid');
    const {_id} = this.props.user;
    if (userid && !_id) {
      this.props.getUser();
    }
  }

  render() {

    // 读取cookie中的userid
    const userid = Cookies.get('userid');
    // 如果没有，自动重定向到登录界面
    if (!userid) {
      return <Redirect to='/login'/>
    }
    // 如果有，读取redux中的user状态
    const {user,unReadCount} = this.props;
    if (!user._id) {
      // 如果user没有_id，返回null(不做任何显示)
      return null;
    } else {
      // 如果有_id，显示对应的界面
      // 根据user的type和header来计算出一个重定向的路由路径，并自动重定向
      let path = this.props.location.pathname;
      if (path === '/') {
        path = getRedirecTo(user.type, user.header);
        return <Redirect to={path}/>
      }

    }

    const navList = this.navList;
    const path = this.props.location.pathname;    //请求的路径
    const currentNav = navList.find(nav => nav.path === path);  // 得到当前的nav，可能没有

    if(currentNav){
      // 决定哪个路由需要隐藏
      if(user.type === '老板'){
        //隐藏数组的第二个
        navList[1].hide = true
      }else{
        //隐藏数组的第一个
        navList[0].hide = true
      }
    }

    return (
        <div>
          {currentNav? <NavBar className='sticky-header'>{currentNav.title}</NavBar> : null}
          <Switch>
            {
              navList.map((nav,index) => <Route key={index} path={nav.path} component={nav.component}/>)
            }
            <Route path='/bossinfo' component={BossInfo}/>
            <Route path='/mengxininfo' component={MengXinInfo}/>
            <Route path='/chat/:userid' component={Chat}/>
            <Route component={NotFound}/>
          </Switch>
          {currentNav? <NavFooter navList={navList} unReadCount={unReadCount}/> : null}
        </div>
    )
  }
}

export default connect(
    state => ({user: state.user,unReadCount:state.chat.unReadCount}),
    {getUser}
)(Main)